<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title="城市列表"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 列表 -->
    <van-index-bar :index-list="indexList" highlight-color="pink">
      <van-index-anchor index="1">当前城市</van-index-anchor>
      <van-cell title="文本" />

      <van-index-anchor index="2">热门城市</van-index-anchor>
      <van-cell
        v-for="item in bodyList"
        :key="item.index"
        :title="item.label"
      />

      <van-index-anchor index="2">热门城市</van-index-anchor>
      <van-cell
        v-for="item in bodyList"
        :key="item.index"
        :title="item.label"
      />
    </van-index-bar>
  </div>
</template>

<script>
import { hot, lists } from '@/api/jest'
export default {
  name: 'List',
  props: {},

  data () {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      // 热门城市shujv
      bodyList: ''
    }
  },

  async created () {
    const data = await hot()
    //  console.log(data);
    this.bodyList = data.body
    //  console.log(this.bodyList);
    const { body } = await lists('1')
    //  console.log(body);
    body.forEach(item => {
      item.short.substr(0, 1).toUpperCase()
      // console.log(a)
    })
  }
}
</script>

<style scoped lang="less"></style>
